<!--
 * @Author: liaoyu1992 1519778181@qq.com
 * @Date: 2022-11-04 13:24:33
 * @LastEditors: liaoyu1992 1519778181@qq.com
 * @LastEditTime: 2022-11-11 22:05:04
 * @FilePath: \kgantt\core\components\tasklist\TaskListHeaderDefault.vue
 * @Description: 表头
-->
<template>
  <div
    class="kgantt-ganttTable"
    :style="'padding:9px 0;font-family:' + fontFamily + ';fontSize:' + fontSize"
  >
    <div
      class="kgantt-ganttTable_Header"
      :style="'height:' + (headerHeight - 20) + 'px'"
    >
      <div
        v-for="(item, index) in resourceArea"
        :key="`header${item.fieldId}`"
        class="kgantt-ganttTable_HeaderItem"
        :style="`min-width:${rowWidth}px;${index === resourceArea.length - 1?'':'border-right: 1px solid rgb(196, 196, 196)'}`"
      >
        &nbsp;{{ item.name }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PropType } from "vue";
import { ResourceArea } from "../../types/publicTypes";
defineProps({
  resourceArea: {
    type: Array as PropType<ResourceArea[]>,
    default: () => [],
  },
  headerHeight: {
    type: Number,
    default: 0,
  },
  rowWidth: {
    type: Number,
    default: 0,
  },
  fontFamily: {
    type: String,
    default: "",
  },
  fontSize: {
    type: String,
    default: "",
  },
});
</script>